<template>
	<div class="">
		<div class="taskTitle">
			<div class="topSearch">
				<el-input placeholder="搜索" v-model="input4">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>

		</div>
		<!-- 文件数据 -->
		<div class="mynum">
			<div class="">
				全部文件
			</div>
			<div class="">
				共 4 个
			</div>
		</div>
		<!-- end -->
		<!-- 详情 -->
		<div class="detial">
			<div class="">
				<el-checkbox v-model="checked"></el-checkbox>
				<span class="fontIn">备选项</span>
			</div>
			<div class="">
				<span class="">下载</span>
			</div>
			<!-- <div class="">
				<span class="">创建者</span>
			</div> -->
			<div class="">
				<span class="">创建日期</span>
			</div>

		</div>
		<!-- end -->
		<div class="inDetialIn" v-if="detialList != ''">
			<div class="" v-for="(item,index) in detialList" :key="index">
				<div class="detial1">
					<div class="leftU">
						<el-checkbox v-model="item.status"></el-checkbox>
						<div class="">
							<img v-if="item.type=='wenjj'" class="detialPic" src="../../../assets/wenjj.png">
							<img v-if="item.type=='word'" class="detialPic" src="../../../assets/Word.png">
							<img v-if="item.type=='ppt'" class="detialPic" src="../../../assets/file-ppt.png">
							<img v-if="item.type=='excel'" class="detialPic" src="../../../assets/office-excel.png">
						</div>
						<span class="fontIn">{{item.title}}</span>
					</div>
					<div class="">
						<span v-if="item.is_dow == true" class="inDown">下载</span>
					</div>
					<div class="">
						<span class="myIN">{{item.creator}}</span>
					</div>
					<div class="myIN">
						<span class="">{{item.creatorDtat}}</span>
					</div>

				</div>
			</div>
		</div>

		<div class="" v-else>
			<el-empty description="空数据"></el-empty>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				input4: '',
				checked: true,
				detialList: [
					// {
					// 	status: false,
					// 	typeOf: 0,
					// 	name: "教材教参",
					// 	isYes: 0,
					// 	creator: "kaka",
					// 	creatorDtat: '2011-11-11'
					// },
					// {
					// 	status: false,
					// 	typeOf: 1,
					// 	name: "答案.word",
					// 	isYes: 0,
					// 	creator: "kaka",
					// 	creatorDtat: '2011-11-11'
					// },
					// {
					// 	status: false,
					// 	typeOf: 2,
					// 	name: "资料.ppt",
					// 	isYes: 1,
					// 	creator: "kaka",
					// 	creatorDtat: '2011-11-11'
					// },
					// {
					// 	status: false,
					// 	typeOf: 3,
					// 	name: "表格.excel",
					// 	isYes: 1,
					// 	creator: "kaka",
					// 	creatorDtat: '2011-11-11'
					// }
				]
			};
		},
		methods: {
			getDetial() {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.Classdatum/index', {
					id: JSON.parse(sessionStorage.getItem('classInfoV')).id
				}).then(res => {
					console.log(res);
					this.detialList = res.data.data
				}).catch(err => {
					console.log(err);
				})
			}
		},
		created() {
			this.getDetial()
		}
	};
</script>

<style>
	.leftU {
		display: flex;
		align-items: center;
	}

	.detialPic {
		width: 36px;
		margin-left: 10px;
	}

	.inDetialIn {
		margin-top: 10px;
	}

	.fontIn {
		margin-left: 8px;
	}

	.detial1 {
		padding: 16px 24px;
		margin: 0 24px;
		display: grid;
		color: #838082;
		grid-template-columns: 4fr 1fr 1fr 1.5fr;
	}

	.detial1:hover {
		background-color: #f0f6ff;
	}

	.inDown {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.myIN {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.detial1:hover .inDown {
		color: #67a2ff;
		cursor: pointer;
	}

	.detial {
		background-color: #f5f6f7;
		padding: 10px 24px;
		margin: 0 24px;
		color: #8a97a8;
		display: grid;
		grid-template-columns: 3fr 1.5fr 1.5fr;
	}

	.mynum {
		display: flex;
		padding: 16px 24px;
		justify-content: space-between;
		color: #898b98;
	}

	.topSearch {
		width: 200px;
	}

	.taskTitle {
		display: flex;
		justify-content: flex-end;
		padding: 0 24px 16px 24px;
	}
</style>
